.app-template {
  background-color: govuk-functional-colour(body-background);
}

// Injected into the preview page, that is then put in an iframe
.app-template__body--component-preview {
  margin: 15px 0;

  // Highlight the whitespace around a component, so you can see without having to
  // inspect it.
  .app-whitespace-highlight {
    @include govuk-clearfix;

    content: " ";
    display: table;
    width: 100%;
    clear: both;
    box-shadow: 0 0 0 5px mix(govuk-colour("blue"), govuk-colour("white"), 10%);
  }
}

// Removes the breakpoint sass-mq debug display
.app-template__body--component-preview::before {
  display: none;
}

// Darken page background for previewing inversely coloured components
.app-template__body--inverse {
  background-color: govuk-colour("blue");
}

.app-template__body--component-preview.app-template__body--inverse {
  .app-whitespace-highlight {
    box-shadow: 0 0 0 5px mix(govuk-colour("white"), govuk-colour("blue"), 10%);
  }
}

.app-width-container--wide {
  @include govuk-width-container(1200px);
}

.app-component-preview {
  position: relative;
  width: 100%;
  margin-bottom: 15px;
}

.app-component-preview__iframe {
  display: block;
  position: relative;
  z-index: 20;
  width: 100%;
  border: 0;
}
